<template>
  <div>
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check="false"
    >
      <li v-for="i in list" :key="i.filmId">
        <div class="over">
          <img :src="i.poster" alt @click="sendid(i.filmId)"/>
          <div class="left">
            <h4>
              {{i.name}}
              <span class="itname">{{i.item.name}}</span>
            </h4>
            <p v-show="i.grade&&v===1">
              观众评分:
              <span class="grade">{{i.grade}}</span>
            </p>
            <p class="limitlen">
              主演：
              <span class="lspan" v-for="(j,index) in i.actors" :key="index">{{j.name}}</span>
            </p>
            <p v-show="v===1">{{i.nation}}&nbsp;|&nbsp;{{i.runtime}}分钟</p>
            <p
              v-show="v===2"
            >上映日期&nbsp;&nbsp;周{{gettime(i.premiereAt)}}&nbsp;&nbsp;&nbsp;{{rq(i.premiereAt,1)}}月{{rq(i.premiereAt,0)}}日</p>
          </div>
          <div class="right">
            <p v-if="v===1" @click="forshop(i.filmId)">购票</p>
            <p v-if="v===2" @click="forshop(i.filmId)">预购</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getMovie } from "@/api";
export default {
  data() {
    return {
      list: "",
      v: "",
      num: 1,
      actors: "",
      loading: false,
    };
  },
  computed: {
    forcity() {
      return this.$store.state.city.id;
    }
  },
  methods: {
    sendid(id) {
      //跳转电影详情
      this.$router.push({ name: "moviedetial", params: { id: id } });
    },
    loadMore() {
      this.loading = true;
      this.num++;
      getMovie(this.v, this.num, this.forcity).then(resp => {
        this.list = this.list.concat(resp.data.data.films);
        if (this.list.length < resp.data.data.total) {
          this.loading = false;
        }
      });
    },
    gettime(t) {
      //上映时间
      var myDate = new Date();
      myDate.setTime(1000 * t);
      switch (myDate.getDay()) {
        case 0:
          {
            return "一";
          }
          break;
        case 1:
          {
            return "二";
          }
          break;
        case 2:
          {
            return "三";
          }
          break;
        case 3:
          {
            return "四";
          }
          break;
        case 4:
          {
            return "五";
          }
          break;
        case 5:
          {
            return "六";
          }
          break;
        case 6:
          {
            return "日";
          }
          break;
      }
    },
    rq(t, n) {
      var myDate = new Date();
      myDate.setTime(1000 * t);
      if (n) {
        return myDate.getMonth() + 1;
      }
      return myDate.getDate();
    },
    forshop(id){
      this.$router.push(`/orderbyfilm/${id}`)
    }
  },
  watch: {
    //监控路由，分配是热映还是即将上演
    $route: {
      handler(n, o) {
        if (n.params.typess == "ishot") {
          this.v = 1;
        }
        if (n.params.typess == "willcoming") {
          this.v = 2;
        }
        this.num = 1;
        getMovie(this.v, this.num, this.forcity).then(resp => {
          this.list = resp.data.data.films;
        });
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style scoped>
img {
  margin-left: 0.5rem;
  float: left;
  width: 1.3rem;
  height: 1.9rem;
}
.left {
  float: left;
  margin-left: 0.5rem;
  width: 3.5rem;
}
.over {
  overflow: hidden;
  margin-top: 0.5rem;
}
.limitlen {
  overflow: hidden;
  width: 100%;
  height: 0.4rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lspan {
  padding-right: 0.3rem;
}
h4 {
  font-size: 0.35rem;
  font-weight: 400;
}
.grade {
  color: orangered;
  font-size: 0.38rem;
}
p {
  padding: 0.02rem 0;
}
.itname {
  margin-left: 0.1rem;
  padding: 0 0.05rem;
  border-radius: 0.1rem;
  background-color: #ccc;
  color: white;
  font-size: 0.2rem;
}
.right {
  float: left;
  margin-top: 0.7rem;
  margin-left: 0.5rem;
}
.right p {
  font-size: 0.2rem;
  color: orange;
  border: 0.03rem solid orange;
  padding: 0.05rem;
  border-radius: 0.09rem;
}
</style>